<template>
	<view class="content">
		<view class="top"></view>
		<view class="swiper">
			<uv-swiper @click="toWebView" :list="list" keyName="image" showTitle height="160"></uv-swiper>
		</view>
		<view class="menu">
			<view class="menu_item" v-for="(item,index) in menuList" @click="toMenu(index)">
				<image :src="item.icon" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;"></image>
				<view style="margin-top: 10rpx;">{{item.name}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="news">
			<view style="display: flex;align-items: center;justify-content: center;font-size: 14px;margin: 40rpx 0;">-
				新闻 -
			</view>
			<view class="news_item" v-for="item in datalist" @click="toNews(item)">
				<view class="news_item_icon">
					<image :src="item.photo_url" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
					</image>
				</view>
				<view class="news_item_con">
					<view class="item_title"> {{item.title}}</view>
					<view class="item_titles">{{item.source}}</view>
				</view>
			</view>
			<uv-load-more :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					image: 'https://mmbiz.qpic.cn/mmbiz_jpg/OMKrqqJZoX387WUjFwq6JeeA7e0dYicOrMHBLpB0PlmUP0CWjD8nNqHc31VciaYbMNtwuYmO3hXDUWLQJ4q903SQ/640?wx_fmt=jpeg&wxfrom=13&tp=wxpic',
					title: '2021年南京市魔方公开赛重磅来袭~',
					link: "https://mp.weixin.qq.com/s/UrfatQlkGu_QR6GPfrfgXA"
				}, {
					image: 'https://mmbiz.qpic.cn/mmbiz_jpg/OMKrqqJZoX1kxMLmCq1ll0iazB7GG9tToFuuZckg1icWLpaSX7GCPHibysPexz59yR3liasEMqSwNhMLSCfDibXI3bQ/640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1',
					title: '2022年“天宝杯”南京市魔方公开赛开始报名',
					link: 'https://mp.weixin.qq.com/s/mxt5ZJbQ9-Z2I1jnu86NDQ'
				}, {
					image: 'https://mmbiz.qpic.cn/mmbiz_jpg/OMKrqqJZoX2QO948dJvrLrylkQHmeIzdvLS0HbB2ImJAsel5ibjPKTcTAjBLDMlHzMEc3MhibrRQl1zLV7Egk6EA/640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1',
					title: '南京市魔方运动协会正式成立！',
					link: 'https://mp.weixin.qq.com/s/yRMr4BB0RW2PzQxMDngJvw'
				}, {
					image: 'https://mmbiz.qpic.cn/sz_mmbiz_jpg/OMKrqqJZoX19t0jFiaGCPHZo39vjIQkwCuf2wQl0I9Ov1dC0o5tHkBEr8iaiaLrVZ6pdSCAEKoibPUHeiaDPpguPkvg/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1',
					title: '2023年南京市魔方公开赛开始报名！',
					link: 'https://mp.weixin.qq.com/s/VcVU2kP4HOWoKp7avvmC2Q'
				}],
				menuList: [{
						name: '比赛报名',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/11.png'
					},
					{
						name: '证书查询',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/12.png'
					},
					{
						name: '赛事成绩',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/13.png'
					},
					{
						name: '记录排名',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/14.png'
					},
					{
						name: '资质认证',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/15.png'
					},
					{
						name: '会员单位',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/16.png'
					},

					{
						name: '我要考级',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/17.png'
					},
					{
						name: '南京市队',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/18.png'
					},
					{
						name: '个人中心',
						icon: 'https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/menu/魔方/19.png'
					},
				],
				status: 'nomore',
				datalist: []
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.getArticle()
			})
		},
		onShareAppMessage(res) {
			return {
				title: '首页',
				path: '/pages/index/index',
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '首页',
				path: '/pages/index/index',
			}
		},
		methods: {
			//轮播图
			toWebView(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/webview?src=' + this.list[e].link
				})
			},
			toMenu(index) {

				if (index == 0) {
					uni.navigateTo({
						url: '/pages/competition/index'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/certificate/certificate'
					})
				} else if (index == 8) {
					uni.switchTab({
						url: '/pages/user/index'
					})
				} else {
					uni.showToast({
						title: '功能暂未开放！',
						icon: 'none'
					})
				}

			},
			toNews(item) {
				if (item.link && item.link != '') {
					uni.navigateTo({
						url: '/pages/webview?src=' + item.link
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/news_detail?id=' + item._id
					})
				}

			},
			// 获取文章
			getArticle() {
				uniCloud.callFunction({
					name: 'pagefunction',
					data: {
						dbName: 'article', //要查询的表名
						pageIndex: this.pageIndex, //第几页
						pageSize: 30 //每页的记录条数
					},
					success: res => {
						this.datalist = this.datalist.concat(res.result.data) //云端返回的查询数据,追加到数组datalist
						this.hasMore = res.result.hasMore //云端返回的是否有更多数据
						if (this.hasMore) {
							this.status = 'more'
							this.pageIndex = this.pageIndex + 1
						} else {
							this.status = 'nomore'
						}
						console.log('datalist', this.datalist)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.top {
			width: 100vw;
			height: 650rpx;
			background-image: url('https://mp-a9591169-b57a-4cea-8f6b-a1dfee61b5f9.cdn.bspapp.com/image/1695092904078.png');
			background-size: 100% 100%;
		}

		.swiper {
			margin: 0 auto;
			margin-top: -320rpx;
			width: 90%;
		}

		.menu {
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.menu_item {
				width: 33%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				margin: 20rpx 0;
			}
		}

		.line {
			background-color: #ededed;
			height: 16rpx;
			width: 85%;
			margin: 20rpx auto;

		}

		.news {
			width: 85%;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.news_item {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				border-bottom: 1px solid #efedee;
				padding-bottom: 20rpx;

				.news_item_icon {
					flex: 1;
				}

				.news_item_con {
					flex: 4;

					.item_title {
						font-size: 14px;
					}

					.item_titles {
						padding: 10rpx 0;
						font-size: 12px;
						color: #676568;
					}
				}
			}
		}
	}
</style>